<template>
  <div style="background:#ddd">
    <header
      class="mint-header"
      style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button
          class="mint-button mint-button--default mint-button--normal"
          style="font-size: 15px;"
          @click="option"
        >
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">详情页</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px"></div> -->
    <div style="width:100%;margin:10px auto 0">
      <mt-cell
        :value="peixundata.tcontent"
        title="培训内容" />
      <mt-cell
        :value="peixundata.ttypename"
        title="培训形式" />
      <mt-cell
        :value="peixundata.classifyname"
        title="培训分类" />
      <mt-cell
        :value="peixundata.company"
        title="培训单位" />
      <mt-cell
        :value="peixundata.pre_begintime+'至'+peixundata.pre_endtime"
        title="培训时间段" />
      <mt-cell
        :value="peixundata.has_cert=='1'?'是':'否'"
        title="是否取证" />
      <div style="position: absolute;bottom:0px;width:100%">
        <mt-button
          v-if="zuangtai!='0'&&peixundata.is_upload_report=='1'"
          type="primary"
          size="large"
          @click="checkimg2 "
        >查看报告</mt-button>
        <mt-button
          v-if="zuangtai!='0'&&peixundata.is_upload_report=='0'"
          type="primary"
          size="large"
          @click="popupVisible3=true"
        >上传报告</mt-button>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade">
      <div style="width:200px;">
        <img
          v-if="filesrc[0]"
          :src="filesrc[0].hash.fileurl"
          alt
          style="width:100%" >
      </div>
    </mt-popup>

    <mt-popup
      v-model="popupVisible3"
      popup-transition="popup-fade"
      style="top:35%">
      <div style="width:100%">
        <div style="font-size:16px;font-weight:bold;text-align:center;line-height:40px">上传报告</div>
        <div>
          <mt-cell title="是否取证">
            <span>
              <select
                v-model="selected"
                placeholder="请选择"
                style="wdith:65px;">
                <option
                  v-for="(item,index) in picdata2"
                  :key="index"
                  :value="item.val">{{ item.name }}</option>
              </select>
            </span>
          </mt-cell>

          <mt-cell title="上传文件">
            <span>
              <span>{{ filename.name }}</span>
              <uploadpic
                :localfiletype="1"
                :imagefile.sync="filename"
                style="position: absolute;bottom:0px;opacity: -1.5;"
              >dd</uploadpic>
              <!-- <mt-button type="primary" style="font-size:14px;padding:5px;height:35px">点击上传</mt-button> -->
            </span>
          </mt-cell>
        </div>
        <div style="width:100%;text-align:center;margin:25px 0 15px 0;">
          <mt-button
            type="primary"
            style="font-size:14px;height:35px"
            @click="popupVisible3=false"
          >取消</mt-button>
          <mt-button
            type="danger"
            style="font-size:14px;height:35px"
            @click="preservebaogao">提交</mt-button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import uploadpic from '~/components/uploadpic.vue'
export default {
  components: {
    uploadpic
  },
  data() {
    return {
      filename: {
        name: '点我上传'
      },
      checkimg: [],
      shenti: '',
      picdata2: [
        { val: '', name: '无' },
        { val: '1', name: '是' },
        { val: '0', name: '否' }
      ],
      popupVisible2: false,
      popupVisible1: false,
      popupVisible3: false,
      selected: '',
      ts: this.newStore(),
      htitle: '详情页',
      username: '',
      plandetail: {},
      peixundata: {},
      zuangtai: '',
      filesrc: []
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    checkbg() {
      this.popupVisible2 = true
    },
    checkimg2() {
      this.popupVisible1 = true
      this.popupVisible2 = false
    },
    getlist() {
      const req = {
        handle: '33224548EFC2E94F97536D55316F44F2C07046ED2C6C984F',
        id: this.$route.query.id
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          console.log(ts.d.data, 'pppp')
          this.filesrc = ts.d.data.operation4
          console.log(this.filesrc)
          this.peixundata = ts.d.data.operation1[0].hash
          for (let i = 0; i < ts.d.data.operation3.length; i += 1) {
            if (
              ts.d.data.operation3[i].hash.pid == localStorage.getItem('pid')
            ) {
              this.zuangtai = ts.d.data.operation3[i].hash.isrepresent
              return
            }
          }
        }
      })
    },
    option() {
      this.$router.push({
        name: 'trainplan',
        query: {
          name: ''
        }
      })
    },
    preservebaogao() {
      if (this.selected == '' || this.selected == undefined) {
        this.$messagebox('提示', '请选择是否取证')
        return
      }
      if (this.filename == {} || this.selected == undefined) {
        this.$messagebox('提示', '请上传报告')
        return
      }
      //未完成
      if (this.selected == '是') {
        this.selected = '0'
      } else {
        this.selected = '1'
      }
      const req = {
        handle:
          '33224548EFC2E94F0E5A626014E7F81B43FCF0CF68CF6BEF64E8E8DD2DDA9E04BFF0B9210751F692',
        id: this.$route.query.id,
        has_cert: this.selected,
        personid: localStorage.getItem('pid'),
        fielname: this.filename.name,
        fileurl: this.filename.url
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.$messagebox('提示', '提交成功').then(action => {
            this.getlist()
            this.popupVisible3 = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.mint-cell-value input {
  text-align: right;
}
.mint-popup {
  width: 95%;
}
.mint-cell-value {
  display: inline-block;
}
</style>
